<template>
  <div id="app">
    <!-- 骨架屏  在数据没有渲染出来之前显示骨架屏幕，数据出来之后 正常渲染  -->
    <van-skeleton title :row="5" v-if="isShow" />
    <router-view v-else v-slot="{ Component }">
  <keep-alive>
    <component :is="Component" />
  </keep-alive>
</router-view>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
let isShow = ref(true)

import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

//watch 监听  路由的变化  只要是路由变化了 先展示骨架屏  然后500ms之后隐藏
watch(route, (newValue, oldValue) => {
  isShow.value = true
  setTimeout(()=>{
    isShow.value = false
  },500)
})
</script>

<style lang="scss" scoped></style>